<template lang="html">
  <section class="components-common_register_panel">
    <div class="panel-container">
      <header class="panel-header">
        <h1>欢迎你的加入</h1>
        <p>这里是Z Plus篮球平台，半分钟快速登记，即可使用</p>
      </header>
      <div class="panel-content">
        <InputItem
          :name="'age'"
          :title="'年龄'"
          :placeHolder="'请输入最多两位整数'"
          :errMsg="'请输入最多两位整数数字'"
          :regExp="/^\d{1,2}$/"
          v-on:dispatchValue="catchValue"
        ></InputItem>
        <InputItem
          :name="'phone'"
          :title="'手机'"
          :placeHolder="'请输入11位数字'"
          :errMsg="'请输入正确格式的手机号码'"
          :regExp="/^\d{11}$/"
          v-on:dispatchValue="catchValue"
        ></InputItem>
        <InputItem
          :name="'height'"
          :title="'身高'"
          :placeHolder="'请输入三位整数'"
          :errMsg="'请输入三位整数数字'"
          :regExp="/^\d{3}$/"
          v-on:dispatchValue="catchValue"
        ></InputItem>
        <!-- <SelectItem
          :name="'gender'"
          :title="'性别'"
          :defaultIndex="0"
          :dist="genderDist"
        ></SelectItem> -->
        <SelectItem
          :name="'position'"
          :title="'位置'"
          :defaultIndex="0"
          :dist="positionDist"
          v-on:dispatchValue="catchValue"
        ></SelectItem>
        <button type="button" class="content-submitBtn" @click="checkAndSubmit">提交</button>
      </div>
    </div>
  </section>
</template>

<script>
import panel from './panel'
import utils from '@/lib/utils'

export default {
  name: 'RegisterPannel',
  mixins: [
    panel
  ],
  data(){
    return {
      formInfo: {
        age: '',
        phone: '',
        height: '',
        position: 0,
      }
    }
  },
  methods: {
    catchValue(payload){
      this.formInfo[payload.key] = payload.value
    },
    checkAndSubmit(){
      let form = this.formInfo
      for(let k in form){
        let val = form[k]
        if(val instanceof Error){
          utils.toast('请检查信息是否正确填写')
          return
        } else if(val === ''){
          utils.toast('请完整填写表单的各项内容')
          return
        }
      }
      form.position = this.positionDist[form.position].id
      this.$emit('submitForm', form)
    }
  }
}
</script>

<style lang="scss" scoped src="./panel.scss"></style>
